<template>
	<view class="wrap">
		<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
		<head-nav-bar :flag="true" :logo="logo" />
		<view class="searchs">
			<u-search @search="search" placeholder-color="rgba(255, 255, 255, 0.5)" :input-style="inputStyle"
				:focus="true" :show-action="false" color="#FFFFFF" height="80" bg-color="rgba(255, 255, 255, 0.2)"
				placeholder="请输入搜索口令" @change="onInput" :clearabled="false" @clear="clear">
			</u-search>
		</view>

		<!-- 轮播图 -->
		<u-swiper mode="dot" bg-color="none" :height="234" name="imgUrl" :list="swiperList" @click="swiperListClick">
		</u-swiper>

		<!-- 推荐壁纸 -->
		<view class=" recomennd">
			<view class="rec">
				<view class="title">
					推荐壁纸
					<view class="line"></view>
				</view>
			</view>
			<scroll-view scroll-x="true" class="data-list" @scrolltolower="recommendScroll">
				<view v-for="(item, index) in recommendPicList" :key="index" class="data-list-item">
					<image @click="clickRecommend(index)" class="image" :src="item.url"></image>
				</view>
			</scroll-view>
		</view>

		<!-- 分类信息 -->
		<view class="tabs">
			<u-tabs height="60" bg-color="none" font-size="28" active-color="#fff" :bar-style="barSty"
				:active-item-style="ActiveStyle" inactive-color="#fff" name="categoryName" :list="categoryList"
				:current="categoryCurrent" @change="categoryChange">
			</u-tabs>
		</view>
		<view>
			<view>
				<!-- 手机壁纸类 -->
				<waterfall3 v-if="categoryType=='mobile'" :list="categoryPicList" :atlasId="categoryAtlasId" />
				<!-- 电脑壁纸类 -->
				<waterfall2 v-else-if="categoryType=='pc'" :list="categoryPicList" :atlasId="categoryAtlasId" />
				<!-- 表情包 -->
				<photo v-else-if="categoryType=='photo'" :list="categoryPicList" :atlasId="categoryAtlasId"
					:atlasName="categoryAtlasName" />
				<!-- 动态壁纸 -->
				<waterfall4 v-else="categoryType=='trendsSuffix'" :list="categoryPicList" :atlasId="categoryAtlasId"
					:atlasName="categoryAtlasName" />
				<!-- 加载中提示 -->
				<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30"
					margin-top="10" margin-bottom="10" />
			</view>
			<view v-if="isEmpty" class="empty">
				<u-empty color="#A897D9" text="暂无数据" src="https://tb.wuyouzhuan888.com/appleticon/noDate.png"></u-empty>

			</view>
		</view>
	</view>

</template>
<script>
	import HeadNavBar from '@/components/headnavbar/index';
	import waterfall from '@/components/waterfall1';
	import waterfall3 from '@/components/waterfall3';
	import waterfall2 from '@/components/waterfall2';
	import waterfall4 from '@/components/waterfall4';
	import photo from './components/photo.vue';
	export default {
		components: {
			HeadNavBar,
			waterfall,
			waterfall3,
			waterfall2,
			photo,
			waterfall4,
		},
		data() {
			return {
				// 轮播图列表
				swiperList: [],
				// 推荐图片请求信息
				recommendFormData: {
					total: 0,
					pageSize: 10, //每页10条数据
					page: 1, //第几页
				},
				// 推荐图片列表
				recommendPicList: [],
				// 推荐图-图集ID
				recommendAtlasId: 0,
				// 分类列表
				categoryList: [],
				// 分类默认选中
				categoryCurrent: 0,
				// 分类类型
				categoryType: '',
				// 分类ID
				categoryId: 0,
				// 分类图-图集ID
				categoryAtlasId: 0,
				// 分类图-图集名称
				categoryAtlasName: '',
				// 分类的图片列表
				categoryPicList: [],
				// 分类图片请求信息
				categoryFormData: {
					total: 0, //总共多少条数据
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				// 加载状态
				status: "loadmore",
				// 数据为空
				isEmpty: false,


				ActiveStyle: {
					fontSize: '32rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: 'linear-gradient(to right, #05FAFE, #EF44C4)'
				},
				inputStyle: {
					backgroundColor: 'none',
					caretColor: 'white'
				},
				keyword: '',
				logo: '',

			};
		},
		onLoad() {
			// this.$u.api.logo.getLogo({}).then(res => {
			// 	this.logo = res.data.logo
			// })
			uni.showLoading({
				title: '加载中...'
			})

			// token存在
			if (uni.getStorageSync('token')) {
				// 获取首页信息
				this.getInfo();
				// 获取推荐壁纸
				this.getRecommendPicList()
			} else {
				// 校验token
				this.checkToken();
			}

		},
		onShow() {
			this.$u.api.logo.getLogo({}).then(res => {
					this.logo = res.data.logo
				}),
				uni.hideLoading()
		},
		// mounted() {
		// 	this.logo = uni.getStorageSync('logo')
		// 	uni.hideLoading()
		// },
		// 触底加载
		onReachBottom() {
			let allTotal = this.categoryFormData.page * this.categoryFormData.pageSize;

			if (allTotal < this.categoryFormData.total) {
				//当前条数小于总条数 则增加请求页数
				//加载中状态
				this.status = "loading";
				this.categoryFormData.page++;

				this.getCategoryPicList(this.categoryId);
			} else {
				//加载完状态
				this.status = "noMore";
			}
		},
		methods: {
			clear() {
				this.keyword = ''
			},
			onInput(e) {
				this.keyword = e
			},
			// 校验token
			checkToken() {
				let checkTokenTimer = setInterval(res => {
					// token 存在
					if (uni.getStorageSync('token')) {
						// 清除计时器
						clearInterval(checkTokenTimer)
						// 获取首页信息
						this.getInfo();
						// 获取推荐壁纸
						this.getRecommendPicList()
					}
				})
			},
			// 获取首页信息
			getInfo() {
				this.$u.api.index.getInfo().then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg)
					}
					// 轮播图
					if (res.data.carouselInfo) {
						this.swiperList = res.data.carouselInfo
					}
					// 分类信息
					this.categoryList = res.data.categoryList
					// 分类类型  pc电脑壁纸 photo头像表情 mobile手机壁纸
					this.categoryType = this.categoryList[this.categoryCurrent].type;

					// 分类ID
					this.categoryId = this.categoryList[this.categoryCurrent].categoryId;
					// 分类图片的图集ID
					this.categoryAtlasId = res.data.atlasId;
					// 获取分类下图片列表
					this.getCategoryPicList(this.categoryId);
				})
			},

			// 推荐图片触底加载
			recommendScroll() {
				let allTotal = this.recommendFormData.page * this.recommendFormData.pageSize;

				if (allTotal < this.recommendFormData.total) {
					//当前条数小于总条数 则增加请求页数
					this.recommendFormData.page++;
					this.getRecommendPicList();
				} else {
					//加载完状态
					this.status = "noMore";
				}
			},

			// 获取推荐图列表
			getRecommendPicList() {
				this.$u.api.index.getRecommendPicList({
						size: this.recommendFormData.pageSize,
						page: this.recommendFormData.page,
					})
					.then((res) => {
						if (res.code != 200) {
							this.$u.toast(res.msg);
						}
						// 推荐图片总数
						if (res.data.total) {
							this.recommendFormData.total = res.data.total;
						}

						// 推荐图片的图集ID
						this.recommendAtlasId = res.data.atlasId;
						// 页数大于1则追加
						if (this.recommendFormData.page > 1) {
							this.recommendPicList.push(...res.data.list);
						} else {
							this.recommendPicList = res.data.list
						}
					});
			},

			// 获取分类图片
			getCategoryPicList(categoryId) {

				if (this.categoryType == 'mobile') {
					this.categoryFormData.pageSize = 15;
				} else if (this.categoryType == 'pc') {
					this.categoryFormData.pageSize = 10;
				} else {
					this.categoryFormData.pageSize = 28;
				}

				this.$u.api.index.getCategoryPicList({
						size: this.categoryFormData.pageSize,
						page: this.categoryFormData.page,
						categoryId: categoryId,
					})
					.then((res) => {
						if (res.code != 200) {
							this.$u.toast(res.msg);
							return
						}

						// 分类下图片总数
						if (res.data.total) {
							this.categoryFormData.total = res.data.total;
						}

						// 分类下图片的图集ID
						this.categoryAtlasId = res.data.atlasId;
						// 分类下图片的图集名称
						this.categoryAtlasName = res.data.atlasName;

						setTimeout(() => {
							if (this.categoryFormData.page > 1) {
								this.categoryPicList.push(...res.data.list);
							} else {
								this.categoryPicList = res.data.list
							}

							// 数据为空
							if (this.categoryPicList.length == 0) {
								this.isEmpty = true
							}

							if (this.categoryFormData.pageSize > res.data.list.length) {
								//加载完状态
								this.status = "noMore";
							}

						})
					});
			},
			// 搜索
			search() {
				this.keyword = this.keyword.replace(/[, ]/g, '');
				if (this.keyword == '') {
					this.$u.toast('请输入搜索内容');
					return
				}

				this.$u.api.code.check({
						code: this.keyword
					})
					.then((res) => {
						if (res.code != 200) {
							uni.showModal({
								title: "温馨提示",
								content: res.msg,
								showCancel: false,
								confirmText: '知道了'
							});
							return
						}

						if (res.data != false) {
							// const url = 
							// let path;
							// if (res.data.type == 'mobile') {
							// 	path = '/pages/sys/cate_bags/mobilemore';
							// } else if (res.data.type == 'pc') {
							// 	path = '/pages/sys/cate_bags/pcmore';
							// } else {
							// 	path = '/pages/sys/cate_bags/biaoqingmore';
							// }

							// const url = path + '?atlasId=' + res.data.atlasId +
							// 	'&creatorId=' + res.data.creatorId +
							// 	'&accountId=' + res.data.accountId

							uni.redirectTo({
								url: res.data.url
							})

						}
						//  else {
						// 	uni.navigateTo({
						// 		url: "/pages/sys/home_bags/search?keyword=" + this.keyword
						// 	})
						// }
					});
			},

			// 跳转手机类壁纸下载页
			clickRecommend(index) {

				// 获取推荐图片数组
				const imgList = encodeURIComponent(JSON.stringify(this.recommendPicList))

				uni.navigateTo({
					url: "/pages/sys/cate_bags/detail?imgList=" + imgList + "&selectIndex=" + index + "&atlasId=" +
						this.recommendAtlasId
				})
			},

			// 分类点击
			categoryChange(index) {
				this.categoryCurrent = index;
				// 分类类型  pc电脑壁纸 photo头像表情 mobile手机壁纸 
				this.categoryType = this.categoryList[index].type;
				// 分类ID
				this.categoryId = this.categoryList[this.categoryCurrent].categoryId;
				// 重置加载状态
				this.status = "loading";
				// 重置页数
				this.categoryFormData.page = 1;
				// 重置列表数据
				this.categoryPicList = [];
				// 获取分类下图片
				this.getCategoryPicList(this.categoryId)
			},

			// 轮播图点击
			swiperListClick(index) {
				// 图片跳转路径
				let jumpUrl = this.swiperList[index].jumpUrl;
				// 图片没有跳转路径
				if (jumpUrl == '') {
					return false
				}
				uni.navigateTo({
					url: jumpUrl
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	.wrap {
		margin: 0 32rpx;

		.tabs {
			margin: 24rpx 0;
		}

		/deep/ .u-tab-bar {
			margin-left: -8px !important;
		}

		.recomennd {
			.rec {
				padding: 50rpx 0 24rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					width: 128rpx;
					height: 45rpx;
					font-size: 32rpx;
					font-family: PingFang HK-Light, PingFang HK;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 38rpx;

					.line {
						width: 50rpx;
						height: 5rpx;
						margin-top: 8rpx;
						background: linear-gradient(to right, #05FAFE, #EF44C4)
					}
				}

				.more {
					font-size: 27rpx;
					font-family: PingFang HK-Light, PingFang HK;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 32rpx;
					display: flex;
					align-items: center;

					.img {
						width: 9rpx;
						height: 15rpx;
						margin-left: 10rpx;
					}
				}
			}

			.data-list {
				width: 100%;
				white-space: nowrap;
			}

			.data-list-item {
				display: inline-block;
				margin-right: 16rpx;
				// border-radius: 20rpx;
				width: 203rpx;
				height: 326rpx;

				.image {
					border-radius: 20rpx;
					width: 100%;
					height: 100%;
				}
			}
		}


		.searchs {
			margin-bottom: 24rpx;

			/deep/ .u-icon__icon {
				font-size: 36rpx;
			}

			/deep/ .u-content {
				padding-left: 35rpx;
			}
		}

		/deep/ .u-swiper-indicator {
			bottom: -32rpx !important;
		}

		/deep/ .u-swiper-wrap {
			overflow: inherit;
		}

		/deep/ .u-indicator-item-dot {
			background: rgba(225, 225, 225, 0.5);
			margin-right: 24rpx;
			width: 10rpx;
			height: 10rpx;
		}

		/deep/ .u-indicator-item-dot-active {
			background: #fff;
		}

	}
</style>